<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片跟随鼠标移动</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        box-sizing: border-box;
    }

    .animated-banner {
        display: flex;
        justify-content: center;
        margin: 0 auto;
        min-width: 1000px;
        min-height: 155px;
        height: 9.375vw;
        max-height: 240px;

        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;

    }

    .layer {
        position: absolute;
        left: -150px;
        top: 0;
        height: 100%;
        /* 宽度比视口宽300像素  防止左右滑动看见图片栅栏中断的情况*/
        width: calc(100vw + 300px);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        /* 添加平滑过渡效果 */
        transition: transform 0.1s ease;
    }

    img {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div class="animated-banner" id="scene">
        <!-- 图片 -->
        <div class="layer"><img src="1.webp"></div>
        <div class="layer"><img src="2.webp"></div>
        <div class="layer"><img src="3.webp"></div>
        <div class="layer"><img src="4.webp"></div>
        <div class="layer"><img src="5.webp"></div>
        <div class="layer"><img src="6.webp"></div>
        <div class="layer"><img src="7.webp"></div>
        <div class="layer"><img src="8.webp"></div>
        <div class="layer"><img src="9.webp"></div>
        <div class="layer"><img src="10.webp"></div>
        <div class="layer"><img src="11.webp"></div>
        <div class="layer"><img src="12.webp"></div>
        <div class="layer"><img src="13.webp"></div>
        <!-- 视频 设置静音 自动播放 -->
        <div class="layer">
            <video src="14.webm" loop playsinline width="200" height="500" autoplay muted
                style="object-fit: cover; height: 500px; width: 200px; transform: translate(400px, 0px) rotate(0deg) scale(1); opacity: 1;">
            </video>
        </div>
        <div class="layer"><img src="15.webp"></div>
        <div class="layer"><img src="16.webp"></div>
        <div class="layer"><img src="17.webp"></div>
        <div class="layer"><img src="18.webp"></div>
        <div class="layer"><img src="19.webp"></div>
        <!-- 视频 设置静音 自动播放 -->
        <div class="layer">
            <video src="20.webm" loop playsinline width="200" height="500" autoplay muted
                style="object-fit: cover; height: 500px; width: 200px; transform: translate(170px, 0px) rotate(0deg) scale(1); opacity: 1;">
            </video>
        </div>
        <!-- 视频 设置静音 自动播放 -->
        <div class="layer">
            <video src="21.webm" loop playsinline width="200" height="500" autoplay muted
                style="object-fit: cover; height: 500px; width: 200px; transform: translate(-600px, 0px) rotate(0deg) scale(1); opacity: 1;">
            </video>
        </div>


    </div>
</body>
<!-- 
    这是一个专门处理3D视差的parallax.js库 
    https://github.com/wagerfield/parallax
    示例：
          先引入js文件                                             <script src="./parallax.min.js"></script>
          给外面的元素加上id="scene" 里面的元素加上                 data-depth="0.2" 属性
          页面加载完成后获取id为scene的元素                         var scene = document.getElementById('scene');
          执行库里面的方法，可以用值接收配置额外的参数控制展示效果   var parallaxInstance = new Parallax(scene); 
    
    下面的实现是自己手写的，如果是项目要用的比较复杂的话推荐用上面的js库
    -->
<script>

    document.addEventListener('DOMContentLoaded', () => {
        const banner = document.querySelector('.animated-banner');
        const layers = document.querySelectorAll('.layer');

        // 数组的长度 == 元素个数
        const movementFactor = Array.from({ length: layers.length }, (_, i) => (i + 1) * 0.3);


        let isMouseInside = false; // 用于标记鼠标是否在banner内
        let lastMouseX = 0; // 上一次鼠标X坐标

        const handleMouseMove = (event) => {
            if (!isMouseInside) return; // 鼠标尚未进入区域时不做处理

            const mouseX = event.clientX - banner.getBoundingClientRect().left; // 计算鼠标相对banner的X位置
            const bannerWidth = banner.offsetWidth;

            // 计算相对移动量
            const deltaX = mouseX - lastMouseX;
            // console.log(deltaX);

            // 只有在鼠标位置发生变化时才进行位置调整
            if (Math.abs(deltaX) > 1) {
                layers.forEach((layer, index) => {
                    const movementX = deltaX * movementFactor[index] / 50;

                    if (index == 16) {//这个水滴是斜向移动的 水滴移动的范围好像比背景和人物小点 所以除2
                        layer.style.transform = `translate(${movementX / 2}px,${movementX / 2}px)`;
                    } else if (index == 9 || index == 10) {//这个水滴是上下移动的
                        layer.style.transform = `translateY(${movementX / 2}px)`;
                    } else if (index == 4) {//这张小鲸鱼图片是反着移动的把movementX值改为负的
                        layer.style.transform = `translateX(${-movementX}px)`;
                    } else {
                        layer.style.transform = `translateX(${movementX}px)`;
                    }
                });
            }

        }

        const handleMouseEnter = (event) => {
            isMouseInside = true; // 鼠标进入时标记为true
            lastMouseX = event.clientX - banner.getBoundingClientRect().left; // 初始化上一次的鼠标位置为当前进入位置
            layers.forEach(layer => {
                layer.style.transition = 'none'; // 鼠标进入时禁用过渡效果
            });
        };

        const handleMouseLeave = () => {
            isMouseInside = false; // 鼠标离开时标记为false
            layers.forEach(layer => {
                layer.style.transition = 'transform 0.5s ease'; // 恢复过渡效果
                layer.style.transform = `translateX(0px)`; // 恢复到初始位置
            });

        };

        banner.addEventListener('mousemove', handleMouseMove);
        banner.addEventListener('mouseenter', handleMouseEnter);
        banner.addEventListener('mouseleave', handleMouseLeave);
    });




</script>


</html>